<html>
    <head>
     <title>GCS Monitor</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link type="text/css" rel="stylesheet" href="/css/main.css" /> 
     <link href="/css/codesite.pack.04102009.css" type="text/css" rel="stylesheet"> 
     <script type="text/javascript" src="/js/gcstest.js"></script>

    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script>
      google.load('visualization', '1', {packages:['annotatedtimeline', 'corechart']});

      google.setOnLoadCallback(drawServChart);
      function drawServChart() {        
        var options = {
                title: 'GCS Serving Heartbeat',
                vAxes: {
                        0: {format: '###.#####', title:'Response Time',textStyle:{color: 'blue'}},
            			1: {format: '#', title:'TotalResults',textStyle:{color: 'red'}}
		        },
		        series: {
		            0: { type: "line", targetAxisIndex: 0 },
		            1: { type: "line", targetAxisIndex: 1 }
		        },
                scaleColumns: [0, 1],
                scaleType: 'allfixed',
                thickness: 2
 
              };                
        var chart = new google.visualization.DataTable();
        chart.addColumn('datetime', 'Date');
        chart.addColumn('number', 'Response Time');
        chart.addColumn('number', 'TotalResults');        
        chart.addRows([
         {% for g in gd %}
            [new Date('{{g.date|date:"Y m d H:i:s"}}'), {{g.response_time}}, {{g.totalResults}}],                         
          {% endfor %}            
         ]);        
        var rchart = new google.visualization.AnnotatedTimeLine(document.getElementById('div_chart'));
        rchart.draw(chart, options);
      }
    </script>
    
    <script>
      google.load('visualization', '1', {packages:['annotatedtimeline', 'corechart']});

      google.setOnLoadCallback(drawIndexChart);
      function drawIndexChart() {        
        var options = {
                title: 'GCS Indexing Heartbeat',
                vAxes: {
                        0: {format: '#', title:'Processed Items',textStyle:{color: 'blue'}},
                        1: {format: '#', title:'Inserted Items',textStyle:{color: 'red'}}
            },
            series: {
                0: { type: "line", targetAxisIndex: 0 },
                1: { type: "line", targetAxisIndex: 1 }
            },
                scaleColumns: [0, 1],
                scaleType: 'allfixed',
                thickness: 2
 
              };                
        var chart = new google.visualization.DataTable();
        chart.addColumn('datetime', 'Date');
        chart.addColumn('number', 'Processed Items');
        chart.addColumn('number', 'Inserted Items');        
        chart.addRows([
         {% for g in gi %}
            [new Date('{{g.date|date:"Y m d H:i:s"}}'), {{g.items_processed}}, {{g.items_inserted}}],                         
          {% endfor %}            
         ]);        
        var rchart = new google.visualization.AnnotatedTimeLine(document.getElementById('div_chart2'));
        rchart.draw(chart, options);
      }
    </script>
           
    
       
    </head>

      <body>      
 
 <div id="container">
 
   <div id="header">

      <img src="/images/commerce_search_logo.gif"/>
      
      <h2>Google Commerce Search Monitoring Utility</h2>
      <hr/>

      
   <div style="float: top; width: 80%">
   
    <p>
    	This utility monitors sites for <a href="http://www.google.com/commercesearch/">Google Commerce Search</a>.
    	Script runs every minute and issues a <code>&q=</code> query and parses the response to extract the 'totalResults' node.
    	The graph shows the response time in ms and the totalResults for each test.   
    </p>
    <p>
    	Customers can trigger alerts if the totalResults falls below a defined threshold or if the response latency increases.
    </p>
    
    {% if message != None %}
		<p class="note">		
			<em>{{ message }}</em>	
		</p>
	{% endif %} 
    
    {% if auth_token != None %}
    <br/>
		<p class="note">
			auth_token:		
			<em>{{ auth_token }}</em>	
		</p>
	{% endif %}   

   </div>   
   
   </div> <!--  header -->
   
   <div id="body">

		   	<table>
		   		<tr><td>cx:</td><td>{{ cx }}</td></tr>	
		   		<tr><td>API Key</td><td>{{ api_key }}</td></tr>	
		   		<tr><td>Merchant ID:</td><td>{{ cid }}</td></tr>			   						
		   		<tr><td>country</td><td>{{ country }}</td></tr>
				<tr><td>alert alias</td><td>{{ alert_alias }}</td></tr>			   				   		
			  </table>	
	
	  {% if gd != None %}
  	    <hr/>	
		<p>	Serving History</p>
    	<div id="div_chart" style="width: 900px; height: 500px;"></div>
      {% endif %}
    
    
    {% if gi != None %}
      <hr/> 
      <p> Indexing History</p>
      <div id="div_chart2" style="width: 900px; height: 500px;"></div>
    {% endif %}    
          
    <hr/>
   </div>   <!-- div body -->
   
   
   <div id="footer">
     <hr/>
    {% if user != None %}
		<em>{{ user.email }}</em>&nbsp;&nbsp;<a href='{{ logout_url }}'>logout</em></a><br/>
	{% endif %}     
     
     <em>{% now "jS F Y H:i" %}</em>
   </div>
   
 </div> <!-- div container  -->



   </body>
</html>